<template>
  <div class="invitation" ref="invitation">
    <img class="bg" src="../../assets/images/invitation/img1.png" alt="">
    <img class="bg" src="../../assets/images/invitation/img2.png" alt="">
    <img class="bg" src="../../assets/images/invitation/img3.png" alt="">
    <img class="bg" src="../../assets/images/invitation/img4.png" alt="">
    <img class="bg" src="../../assets/images/invitation/img5.png" alt="">
    <img class="bg" src="../../assets/images/invitation/img6.png" alt="">
    <div class="button-box" ref="button-box">
      <router-link to="/"><img class="bg" src="../../assets/images/invitation/banner.png" alt=""></router-link>
    </div>
  </div>
</template>
<script>
import { isMobile } from '@/utils/judgingUA';

export default {
  data() {
    return {
      isMobile: isMobile(),
    };
  },
  mounted() {
    this.setSize();
    window.addEventListener('resize', this.setSize);
    if (this.isMobile) {
      window.document.querySelector('#app').style.minWidth = 'auto';
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.setSize);
    if (this.isMobile) {
      window.document.querySelector('#app').style.minWidth = '1200px';
    }
  },
  methods: {
    setSize() {
      const w = this.$refs.invitation.offsetWidth;
      if (!this.isMobile) {
        Object.assign(this.$refs['button-box'].style, w === 540 ? {
          width: '200.156px',
          height: '64.0781px',
          top: '563.76px',
        } : {
          width: '4.173333rem',
          height: '1.586667rem',
          top: '8.586667rem',
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.invitation {
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  background: url(../../assets/images/invitation/bg.jpg) no-repeat;
  .bg {
    width: 100%;
    display: block;
  }
  .button-box{
    width: 3.706667rem;
    height: 1.186667rem;
    position: absolute;
    left: 50%;
    top: 10.44rem;
    transform: translateX(-50%);
  }
  .button-box img,.button-box a{
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>

